<template>
  <div>
    <el-row>
      <el-button type="primary" @click="add">新增项目</el-button>
    </el-row>
    <el-table class="table" :data="tableData" @row-click="goToDetail">
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="name" label="项目名称" align="center"></el-table-column>
      <el-table-column prop="managerName" label="负责人" align="center"></el-table-column>
      <el-table-column prop="projectTypeText" label="项目类型" align="center"></el-table-column>
      <el-table-column prop="planStartDate" label="开始时间" align="center"></el-table-column>
      <el-table-column prop="planEndDate" label="完成时间" align="center"></el-table-column>
      <el-table-column prop="statusText" label="状态" align="center"></el-table-column>
      <el-table-column label="操作" align="center" width="300">
        <template slot-scope="scope">
          <el-button size="mini" v-if="scope.row.projectStatus  == '6'" @click.stop="goToSettlement(scope.row)">结项申请</el-button>
          <el-button size="mini" type="success" v-if="scope.row.projectStatus == '1'" @click.stop="goToAlteraction(scope.row)">立项申请</el-button>
          <el-button size="mini" type="warning" v-if="scope.row.projectStatus == '1'" @click.stop="edit(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" v-if="scope.row.projectStatus == '1'" @click.stop="remove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :current-page="current" :page-size="size" :total="total" @current-change="pageChange" class="pagination">
    </el-pagination>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" center>
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item label="项目类型" :label-width="formLabelWidth" required prop="projectType">
          <el-select v-model="form.projectType" value-key="name" placeholder="请选择项目类型" style="width:100%">
            <el-option :label="project.name" :value="project" v-for="project in projects" :key="project.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称" :label-width="formLabelWidth" required prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目描述" :label-width="formLabelWidth">
          <el-input v-model="form.projectDescribe" type="textarea" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addProject">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      form: {
        projectType: {
          id: ""
        },
        name: '',
        projectDescribe: ''
      },
      formLabelWidth: '120px',
      title: "",
      projects: [{
        name: '设备',
        id: '1'
      }, {
        name: '软件',
        id: '2'
      }, {
        name: '硬件',
        id: '3'
      }],
      isEdit: false,
      projectId: '',
      current: 1,
      size: 10,
      total: 0,
      rules: {
        projectType: [
          {required: true, message: '请选择项目类型', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请填写项目名称', trigger: 'blur'}
        ]
      },
      levels: []
    };
  },
  methods: {
    goToDetail(row) {
      this.$router.push({ path: "project/projectDetail", query: row });
    },
    getList() {
      let params = {
        size: this.size, 
        current: this.current
      };
      this.$store.dispatch('project/getProjectList', params).then(res => {
        this.total = res.total * 1;
        this.current = res.current * 1;
        this.tableData = res.records.map(item => {
          item.statusText = $status.projectStatus[item.projectStatus];
          item.projectTypeText = $status.projectType[item.projectType];
          item.planStartDate = item.planStartDate && item.planStartDate.split(' ')[0];
          item.planEndDate =  item.planStartDate && item.planEndDate.split(' ')[0];
          return item;
        });
      });
    },
    pageChange(current) {
      this.current = current * 1
      this.getList();
    },
    addProject() {
      let userInfo = $utils.storage.get('loginInfo');
      let form = this.form;
      this.$refs['form'].validate((valid) => {
        console.log(valid);
        if(!valid) {
        } else {
          if(this.isEdit) {
            if(!form.name) {
              this.$alert('请填写项目名字');
            }
            let params = {
              id: this.projectId,
              name: form.name,
              projectType: form.projectType.id,
              projectDescribe: form.projectDescribe
            };
            this.$store.dispatch('project/editProject', params).then(res => {
              this.showSuccessMessage('成功修改项目');
              this.dialogFormVisible = false;
              this.getList();
            });
          } else {
            let params = {
              name: form.name,
              projectType: form.projectType.id,
              projectDescribe: form.projectDescribe,
              projectStatus: 1,
              managerId: userInfo.userInfoVO.id,
              managerName: userInfo.userInfoVO.userName
            };
            this.$store.dispatch('project/addProject', params).then(res => {
              this.showSuccessMessage('成功新增项目');
              this.dialogFormVisible = false;
              this.getList();
            });
          }
        }
      });
    },
    add() {
      this.form = {};
      this.title = "新增项目";
      this.isEdit = false;  
      this.dialogFormVisible = true;
    },
    edit(detail) {
      this.title = "修改项目";
      this.form.projectType = {value: detail.projectType, name: detail.projectTypeText};
      this.form.name = detail.name;
      this.form.projectDescribe = detail.projectDescribe;
      this.isEdit = true;
      this.projectId = detail.id;
      this.dialogFormVisible = true;
    },
    goToAlteraction(row) {
      row.nextPath = 'application';
      this.$router.push({ path: "project/projectDetail", query: row });
    },
    goToSettlement(row) {
      row.nextPath = 'settlement';
      this.$router.push({ path: "project/projectDetail", query: row });
    },
    remove(row) {
      let params = {
        id: row.id
      }
      this.$store.dispatch('project/removeProject', params).then(res => {
        this.showSuccessMessage('删除成功');
        this.getList();
      });
    },
    getLevelList() {
      let params = {
        configKey: 'project_level'
      };
      this.$store.dispatch('common/getConfigValueByKey', params).then(res => {
        this.levels = JSON.parse(res);
        console.log(this.levels);
      });
    }
  },
  mounted() {
    let userInfo = $utils.storage.get('loginInfo');
      console.log(userInfo);
    this.getList();
    this.getLevelList();
  }
};
</script>
<style lang="less" scoped>
  .table {
    width:100%;
    margin-top: 20px;
  }
  .pagination {
    margin-top: 20px;
  }
</style>